<template>
  <el-dialog :visible.sync="isShow" :before-close="closeDialog" title="添加课程" width="54%" :close-on-click-modal="false"
            :close-on-press-escape="false">
    <div class="edu-page-warp">
      <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="filterSubmit"
            @reset="reset('queryForm')"
      >
        <el-form :model="queryCourseForm" size="mini" label-position="left" label-width="80px">
          <el-row :gutter="24" style="height: 50px;">
            <el-col :span="8">
              <el-form-item label="开课学院:">
                <el-select
                  v-model="queryCourseForm.college"
                  size="mini"
                  style="width: 100%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options.faculty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开课性质:">
                <el-select
                  v-model="queryCourseForm.nature"
                  size="mini"
                  style="width: 100%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options.nature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学期:">
                <el-select
                  v-model="queryCourseForm.term"
                  size="mini"
                  style="width: 100%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options.term"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="float-right no-bottom no-right">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="onSubmit">筛选</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </ConditionCard>
      <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">{{ $t('culture.course.course') }}</h1>
        <el-row style="margin-bottom:10px">
          <el-col :span="6">
            <el-input
              v-model="queryCourseForm.condition"
              type="text"
              placeholder="课程名称或编号"
              size="mini"
              @keyup.enter.native="onSubmit"
            >
              <i
                slot="suffix"
                class="el-icon-search"
                style="margin-top:7px;cursor: pointer;"
                @click="onSubmit"
              />
            </el-input>
          </el-col>
        </el-row>
        <el-table ref="courseTable" :data="courses" size="mini" @selection-change="chooseCourse">
          <el-table-column type="selection" width="55"/>
          <el-table-column width="120" label="课程编码" prop="code"></el-table-column>
          <el-table-column label="课程名称">
            <template slot-scope="props">{{ props.row.name }}</template>
          </el-table-column>
          <el-table-column prop="college" label="开课院系"/>
          <el-table-column prop="term" label="开课学期" width="80"/>
          <el-table-column prop="nature" label="课程属性" width="80"/>
          <el-table-column label="学分" width="50">
            <template slot-scope="props">{{ props.row.credits }}</template>
          </el-table-column>
          <el-table-column label="课时" width="50">
            <template slot-scope="props">{{ props.row.period }}</template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col>
            <el-pagination
              :current-page="queryCourseForm.pageNum_"
              :page-size="queryCourseForm.pageSize_"
              :total="queryCourseForm.total_"
              layout="total,  prev, pager, next, jumper"
              style="float:right;margin-top:10px"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <span slot="footer">
      <div>
        <el-button @click="closeDialog">{{ $t('message.cancel') }}</el-button>
        <el-button type="primary" @click="confirmCourse">{{ $t('message.confirm') }}</el-button>
      </div>
    </span>
  </el-dialog>
</template>
<script>
import { queryCourseList } from 'common/src/api/courseTemplate'
import { queryDic } from 'common/src/api/dictionary'
import { findFaculty } from "common/src/api/faculty";
import Bus from 'common/src/utils/bus'
export default {
  props: {
    isShow: {
      required: true,
      type: Boolean,
    },
  },
  data() {
    return {
      queryCourseForm: {
        college: '',
        term: '',
        nature: '',
        condition: '',
        status: '3',
        pageSize_: 20,
        pageNum_: 1,
        total_: 0,
      },
      options: {
        faculty: [],
        nature: [],
        term: [],
      },
      courses: [],
      currentCourses: [], // 选择的课程
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      findFaculty().then(res => { 
          let data = {"X_YX": res.data};
          UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
      });
      let data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['X_KCXZ', 'X_KKXQ'],
      }
      queryDic(data).then((res) => {
        if (res.code == 200) {
          this.loadOptions('nature', res.data.X_KCXZ)
          this.loadOptions('term', res.data.X_KKXQ)
        }
      })
    },
    loadOptions(optionKey, dataObj) {
      for (let key in dataObj) {
        this.options[optionKey].push({
          value: key,
          label: dataObj[key],
        })
      }
    },
    // 获取课程列表
    getCourses(isFirstPage = false) {
      queryCourseList(this.queryCourseForm).then((response) => {
        if (response.code == 200) {
          this.courses = response.data.list
          this.queryCourseForm.total_ = response.data.total_
        }
      })
    },
    // 课程查询条件重置
    reset() {
      this.$refs.queryCourseForm.resetFields();
      this.getCourses()
    },
    // 课程查询
    onSubmit() {
      this.getCourses(true)
    },
    // 课程查询翻页
    handleCurrentChange(val) {
      this.queryCourseForm.pageNum_ = val
      this.getCourses()
    },
    // 课程查询页显示数量
    handleSizeChange(val) {
      this.queryCourseForm.pageSize_ = val
      this.getCourses(true)
    },
    // 确定课程
    confirmCourse() {
      if (this.currentCourses.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择一门课程',
        })
        return
      }
      this.currentCourses = this.currentCourses.map((ele) => {
        return { id: ele.id, name: ele.name }
      })
      this.$emit('get-courses', this.currentCourses)
      this.$refs.courseTable.clearSelection()
    },
    chooseCourse(val) {
      this.currentCourses = val
    },
    closeDialog() {
      this.$emit('change-visible')
    },
  },
  watch: {
    isShow: function(_n, _o) {
      if (_n) this.getCourses()
      else this.currentCourses = []
    },
  },
}
</script>
<style scoped>
    .div-main {
        margin-bottom: 16px;
    }
</style>